<template>
  <div style="
  position: absolute;
                left:0;
                top:0;
                right:0;
                bottom:0;
                margin:auto;
                height:100%;
                width:370px;
">
      <div>
        <!--        bisque   burlywood-->
        <div style="width: 100%;height: 100px;margin-top: 5px">
          <div style="width: 100%;height: 25%">
            <img src="/static/images/力合新图表.jpg" style="width: 100px;height: 100px;margin-top: 15px;
            float: left;border-radius: 50%;
            margin-left: 15px;box-shadow: 0 0 10px burlywood; /* 发光效果 */">
          </div>
          <div style="width: 100%;height: 25%">
            <span style="font-weight: bold;margin-left: 15px;font-size: 17px;float: left;border-radius: 50%;">2024年长护(上海)居家照护培训 </span>
          </div>
          <div style="width: 100%;height: 25%">
            <span
              style="float: left;margin-left: 15px;font-weight: bold;font-size: 14px;margin-top: 5px;color: #7e8c8d">创客老师：{{
                this.name
              }}</span>
          </div>
          <div style="width: 100%;height: 25%">
                      <span
                        style="float: left;margin-left: 15px;font-weight: bold;font-size: 14px;margin-top: 5px;color: #7e8c8d">老师电话：{{ this.type }}</span>
          </div>
          <div style="width: 100%;height: 25%">
            <span
              style="float: left;margin-left: 15px;font-weight: bold;font-size: 14px;margin-top: 5px;color: #7e8c8d">创客编号：{{
                this.id
              }}</span>
          </div>
          <br>
          <hr>
        </div>
      </div>
      <div class="centered-div" style="width: 300px;height: 300px;position: relative;top: 80px;left: 40px">
        <h1 style="">报名二维码</h1>
        <img :src="qrcodeData" alt="二维码"/>
      </div>
      <div
        style="width: 300px;height: 100px; position: relative;top: 100px;left: 40px;text-align: left;float: left;font-size: 14px;color: burlywood">
        提示：该报名二维码对应的创客老师是{{ this.name }}。
      </div>
  </div>
</template>
<script>
import QRCode from "qrcode";
import {Base64} from "js-base64";

export default {
  data() {
    return {
      qrcode: "",
      qrcodeData: "",
      name: '',
      id: '',
      type: '',
    };
  },
  methods: {
    generateQRCode(qrcode) {
      if (this.qrcode) {
        QRCode.toDataURL(this.qrcode)
          .then(dataUrl => {
            this.qrcodeData = dataUrl;
          })
          .catch(error => {
            console.error("生成二维码时出错:", error);
          });
      }
    }
  },
  created() {
    function getParameterByName(name) {
      name = name.replace(/[\[\]]/g, '\\$&')
      var url = window.location.href
      var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)')
      var results = regex.exec(url)
      if (!results) return null
      if (!results[2]) return ''
      // 解码中文字符
      return decodeURIComponent(results[2].replace(/\+/g, ' '))
    }
    this.id = this.$route.params.id;
    this.type = this.$route.params.type;
    this.name = Base64.decode(this.$route.params.name);
    console.log(this.name)
    console.log(this.id)
    console.log(this.type)
    //生成二维码
    //后端获取openid的接口http://gjjava.lihexinzhiye.com/
    this.qrcode = "http://gjjava.lihexinzhiye.com/WeiXin/redirect_mine?id="+this.id+"&name="+this.name+"&type="+this.type;
    this.generateQRCode(this.qrcode);
  }
};
</script>
<style scoped>
.centered-div {
  /*position: fixed; !* 绝对定位 *!*/
  /*top: 40%; !* 距离顶部50% *!*/
  /*left: 50%; !* 距离左侧50% *!*/
  /*transform: translate(-50%, -50%); !* 使用transform属性进行偏移，以确保元素正好在中心 *!*/
  /* 你可以添加更多的样式，如宽度、高度、背景色等 */
  width: 250px;
  height: 250px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 20px;
  box-sizing: border-box; /* 包括边框和内边距在内的宽度和高度 */



}
</style>
